<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=1.0,initial-scale=1.0,width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>

<body>
    <canvas width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementsByTagName("canvas")[0];
        var context = canvas.getContext("2d");

        context.fillStyle = "#f0f";
        context.lineWidth = 4;
        context.strokeStyle = "#0ff";

        // context.moveTo(20, 20);
        // context.lineTo(10, 0);
        // context.lineTo(100, 20);
        // context.lineTo(80, 0);
        // // context.lineTo(300, 40);
        // context.fill();
        //开始一个新的绘制路径
        context.beginPath();
        //设置线条颜色为蓝色
        context.strokeStyle = "yellow";
        //设置路径起点坐标
        context.moveTo(70, 100);
        //绘制直线线段到坐标点(20, 100)
        context.lineTo(70, 150);
        //绘制直线线段到坐标点(70, 100)
        context.lineTo(120, 150);
        //绘制直线线段到坐标点(20,100)  
        context.lineTo(120, 100);
        //先关闭绘制路径。
        context.closePath();
        //最后，按照绘制路径画出直线
        context.stroke();
    </script>
</body>

</html>